<!DOCTYPE>
<html>
    <head>
        <meta charset="utf-8">
		<title>五谷子的个人信息</title>
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/main.css">
        <script src="js/jquery-1.9.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head>
    <body>
        <div>
            <div class="in_box">

                <div class="in_syn">
                    <div class="in_head">
                        <img class="in_head_ed" src="./pic/u=2234417880,4283712&fm=21&gp=0.jpg">
                    </div>
                    <hgroup class="in_msg">
                        <h3 class="in_name">五谷子</h3>
                        <h5 class="in_info">敲掉键盘键</h5>
                        <h4 class="in_job">Web前端工程师</h4>
                    </hgroup>
					<div class="in_ab">
						<ul class="in_ab_ul">
							<li>掌握能力</li>
							<li>学历介绍</li>
							<li>实习经历</li>
							<li>项目经历</li>
							<li>获得荣誉</li>
							<li>其他</li>
						</ul>
					</div>
					<div class="in_footer">
						飞舞的禁令大好机会发生两节课暗红色的空间放辣椒是大法官V刹小，交换机卡士大夫火辣的呼声
					</div>
                </div>

				<div class="in_container">
					<section style="width:900px">
						<h3 class="in_container_tit">掌握能力</h3>
						<ul class="ability_ul">
							<li class="ability_li">
								<div class="ab_wd ab_qd ab_js">Javascript</div>
								<div class="ab_info">
									<ul class="ab_infoul">
										<li class="ab_infoli">熟练原生Javascript；</li>
										<li class="ab_infoli">熟练Javascript库、Jquery（UI）；</li>
									</ul>
								</div>
							</li>
							<li class="ability_li">
								<div class="ab_wd ab_qd ab_h">HTML 5 &amp; CSS 3</div>
								<div class="ab_info">
									<ul class="ab_infoul">
										<li class="ab_infoli">能使用合适的结构编写兼容主流浏览器的页面布局；</li>
										<li class="ab_infoli">了解HTML 5新标签的语义；</li>
										<li class="ab_infoli">能适当运用CSS 3使页面在现代浏览器上效果更佳；</li>
										<li class="ab_infoli">能熟练使用Chrome开发者工具、FireBug等工具辅助开发；</li>
										<li class="ab_infoli">有WebApp开发经验；</li>
									</ul>
								</div>
							</li>
							<li class="ability_li">
								<div class="ab_wd ab_hd ab_jw">Java &amp; JavaWeb</div>
								<div class="ab_info">
									<ul class="ab_infoul">
										<li class="ab_infoli">熟悉开发框架、MVC下的开发；</li>
									</ul>
								</div>
							</li>
							<li class="ability_li">
								<div class="ab_wd ab_hd ab_sql">SQL</div>
								<div class="ab_info">
									<ul class="ab_infoul">
										<li class="ab_infoli">熟悉SQL的使用；</li>
										<li class="ab_infoli">了解SQL的性能优化；</li>
									</ul>
								</div>
							</li>
							<li class="ability_li">
								<div class="ab_wd ab_md ab_ae">After Effects</div>
								<div class="ab_info">
									<ul class="ab_infoul">
										<li class="ab_infoli">会使用特效合成；</li>
										<li class="ab_infoli">对关键帧把控较好、声频调整；</li>
									</ul>
								</div>
							</li>
							<li class="ability_li">
								<div class="ab_wd ab_md ab_ps">PhotoShop</div>
								<div class="ab_info">
									<ul class="ab_infoul">
										<li class="ab_infoli">能进行简单的图片处理和平面设计；</li>
										<li class="ab_infoli">能用网络素材制作可看的图片；</li>
									</ul>
								</div>
							</li>
						</ul>
					</section>


					<div>


					</div>


					<section>
						<h3 class="in_container_tit">学历介绍</h3>
						<section class="cd-timeline cd-container">
							<div class="cd-timeline-block">
								<div class="cd-timeline-box">
									<div class="cd-timeline-img cd-picture"></div>
								</div>
								<div class="cd-timeline-content">
									<h5 class="cd-date">2011年-2015年</h5>
									<img src="./pic/20130308144600327.jpg" style="border-radius:50%;float:left;margin-right:10px;">
									<h2>渤海大学文理学院<small class="jobname">本科</small></h2>
									<p>担任2014级班长、戴尔（中国）校园代表、大一至大三担任家教</p>
								</div>
							</div>

							<div class="cd-timeline-block">
								<div class="cd-timeline-box">
									<div class="cd-timeline-img cd-picture"></div>
								</div>

								<div class="cd-timeline-content">
									<h5 class="cd-date">2008年-2011年</h5>
									<h2>南昌第十六中<small class="jobname">高中</small></h2>
									<p>可惜没有开窍，没事可说！</p>
								</div>
							</div>
						</section>
					</section>



					<section>
						<h3 class="in_container_tit">获得荣誉</h3>
						<section class="cd-timeline cd-container">
							<div class="cd-timeline-block">
								<div class="cd-timeline-box">
									<div class="cd-timeline-img cd-picture"></div>
								</div>
								<div class="cd-timeline-content">
									<h5 class="cd-date">2014年</h5>
									<p>中共党员、优秀学生、奖学金</p>
								</div>
							</div>
							<div class="cd-timeline-block">
								<div class="cd-timeline-box">
									<div class="cd-timeline-img cd-picture"></div>
								</div>
								<div class="cd-timeline-content">
									<h5 class="cd-date">2013年</h5>
									<p>入党积极分子、奖学金</p>
								</div>
							</div>
							<div class="cd-timeline-block">
								<div class="cd-timeline-box">
									<div class="cd-timeline-img cd-picture"></div>
								</div>
								<div class="cd-timeline-content">
									<h5 class="cd-date">2012年</h5>
									<p>奖学金</p>
								</div>
							</div>
							<div class="cd-timeline-block">
								<div class="cd-timeline-box">
									<div class="cd-timeline-img cd-picture"></div>
								</div>
								<div class="cd-timeline-content">
									<h5 class="cd-date">2011年</h5>
									<p>小品大赛最佳创意将、厨艺大赛三等奖、一报一刊A类稿件、一报一刊B类稿件、奖学金</p>
								</div>
							</div>
						</section>
					</section>


					<section>
						<h3 class="in_container_tit">项目经历</h3>

						<section class="cd-timeline cd-container">
							<div class="cd-timeline-block">
								<div class="cd-timeline-box">
									<div class="cd-timeline-img cd-picture"></div>
								</div>
								<div class="cd-timeline-content">
									<div class="cd-date">2015年03月-至今</div>
									<h2>钱方互动科技（北京）有限公司<small class="jobname">开发工程师（前端开发方向）</small></h2>
									<p></p>
								</div>
							</div>


							<div class="cd-timeline-block">
								<div class="cd-timeline-box">
									<div class="cd-timeline-img cd-picture"></div>
								</div>

								<div class="cd-timeline-content">
									<div class="cd-date">2014年07月-2015年01月</div>
									<h2>百年汇智科技（北京）有限公司<small class="jobname">程序员（实习）</small></h2>
									<p>负责前端网站开发</p>
								</div>
							</div>
						</section>
					</section>



					<section class="amjob">
						<h3 class="amjob_tit">业余作品</h3>
						<section class="amjob_page">
							<img src="pic/4534CF5E-FD3F-4679-8A91-4145F9B13A7A.png" width="300px" style="border-radius:5px;float:left;margin-right:10px;">
							<div>
								<header>
									<h3 class="amjob_pagetit">聚会通-聚会管理轻应用<small class="jobname">已完善</small><span class="facility">移动端</span></h3>
									<ul class="amjob_ul">
										<li class="amjob_li amjob_HTML">HTML 5</li>
										<li class="amjob_li amjob_CSS">CSS 3</li>
										<li class="amjob_li amjob_Js">Javascript</li>
										<li class="amjob_li amjob_Java">Java</li>
										<li class="amjob_li amjob_other">Strust2</li>
										<li class="amjob_li amjob_mysql">Mysql</li>
<!--										<li class="amjob_li amjob_dt">2015年03月制</li>-->
									</ul>
								</header>
							</div>
						</section>





						<section class="amjob_page">
							<img src="pic/BF467DAC-C350-4D40-B3B6-4275C0937E73.png" width="300px" style="border-radius:5px;float:left;margin-right:10px;">
							<div>
								<header>
									<h3 class="amjob_pagetit">秘果-倾述自己的秘密<small class="jobname">完善95%</small><span class="facility">PC端</span></h3>
									<ul class="amjob_ul">
										<li class="amjob_li amjob_HTML">HTML 5</li>
										<li class="amjob_li amjob_CSS">CSS 3</li>
										<li class="amjob_li amjob_Js">Javascript</li>
										<li class="amjob_li amjob_other">Bootstrap 3</li>
										<li class="amjob_li amjob_Java">Java</li>
										<li class="amjob_li amjob_other">Strust2</li>
										<li class="amjob_li amjob_mysql">Mysql</li>
<!--										<li class="amjob_li amjob_dt">2015年02月制</li>-->
									</ul>
								</header>
							</div>
						</section>

						<section class="amjob_page">
							<img src="pic/3A55EFCE-A00D-420F-B667-7388296FAB86.png" width="300px" style="border-radius:5px;float:left;margin-right:10px;">
							<div>
								<header>
									<h3 class="amjob_pagetit">夏果-鉴别网购真假货论坛<small class="jobname">已完善</small><span class="facility">PC端</span></h3>
									<ul class="amjob_ul">
										<li class="amjob_li amjob_HTML">HTML 5</li>
										<li class="amjob_li amjob_CSS">CSS 3</li>
										<li class="amjob_li amjob_Js">Javascript</li>
										<li class="amjob_li amjob_other">Bootstrap 3</li>
										<li class="amjob_li amjob_Java">Java</li>
										<li class="amjob_li amjob_other">Strust2</li>
										<li class="amjob_li amjob_mysql">Mysql</li>
<!--										<li class="amjob_li amjob_dt">2015年01月-2015年02月制</li>-->
									</ul>
								</header>
							</div>
						</section>

						<section class="amjob_page">
							<img src="pic/D490B79D-8F0C-4F8D-A31B-D67B118D4312.png" width="300px" style="border-radius:5px;float:left;margin-right:10px;">
							<div>
								<header>
									<h3 class="amjob_pagetit">知乎日报（第三方）<small class="jobname">已完善</small><span class="facility">PC端</span></h3>
									<ul class="amjob_ul">
										<li class="amjob_li amjob_HTML">HTML 5</li>
										<li class="amjob_li amjob_CSS">CSS 3</li>
										<li class="amjob_li amjob_Js">Javascript</li>
										<li class="amjob_li amjob_other">Jquery UI</li>
										<li class="amjob_li amjob_Java">Java</li>
										<li class="amjob_li amjob_other">Strust2</li>
									</ul>
								</header>
							</div>
						</section>
					</section>

				</div>

            </div>
        </div>
    </body>

	<script>
		window.onload=function(){
			document.querySelector(".ab_js").style.width="70%";
			document.querySelector(".ab_h").style.width="80%";
			document.querySelector(".ab_jw").style.width="70%";
			document.querySelector(".ab_sql").style.width="65%";
			document.querySelector(".ab_ae").style.width="50%";
			document.querySelector(".ab_ps").style.width="50%";



			$(".ability_li").mousemove(function(){
				var obj;
                obj = $(this);
				obj.find(".ab_info").show();
			});
			$(".ability_li").mouseleave(function(){
				$(".ab_info").hide();
			})
		};
	</script>
</html>